<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Guest list example</title>
    <style>

    </style>
  </head>
  <body>

  <p class="admitted">Admit: </p>
  <p class="refused">Refuse: </p>


    <script>
    const people = ['Chris', 'Anne', 'Colin', 'Terri', 'Phil', 'Lola', 'Sam', 'Kay', 'Bruce'];

    const admitted = document.querySelector('.admitted');
    const refused = document.querySelector('.refused');

    let i = 0;

    do {
      if(people[i] === 'Phil' || people[i] === 'Lola') {
        refused.textContent += people[i] + ', ';
      } else {
        admitted.textContent += people[i] + ', ';
      }

      i++;
    } while(i < people.length);

    refused.textContent = refused.textContent.slice(0,refused.textContent.length-2) + '.';
    admitted.textContent = admitted.textContent.slice(0,admitted.textContent.length-2) + '.';

    </script>

  </body>
</html>
